<!--created by yuyupeng-->
<!--2023/07/26-->
<!-- 日志磁盘监控 -->
<template>
  <div class="list-card-container">
    <a-row :gutter="20" :style="{ marginTop: '20px' }">
      <a-col :span="6">
        <a-card title="磁盘总大小" :bordered="true" :style="{ width: '100%' }">
          {{ logDistMonitorDataList[1] }}
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="已使用大小" :bordered="true" :style="{ width: '100%' }">
          {{ logDistMonitorDataList[2] }}
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="剩余大小" :bordered="true" :style="{ width: '100%' }">
          {{ logDistMonitorDataList[3] }}
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card
          title="磁盘使用比例"
          :bordered="true"
          :style="{ width: '100%' }"
        >
          {{ logDistMonitorDataList[4] }}
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<!--新script-->
<script lang="ts" setup>
  import { Notification } from '@arco-design/web-vue';
  import queryLogDistMonitorData from '@/api/system/logDistMonitor';
  import { ref, onMounted } from 'vue';

  /**
   * data
   */
  const logDistMonitorDataLoading = ref<boolean>(false); // 指示数据是否正在加载中
  const logDistMonitorDataList = ref<string[]>([]); // 日志磁盘监控信息数组
  /**
   * func
   */
  /**
   * @description 获取日志磁盘信息
   */
  const getLogDistMonitorData = async () => {
    logDistMonitorDataLoading.value = true;
    try {
      const { data } = (await queryLogDistMonitorData()) as any;
      const newData = data.replace(/\s+/gi, ' '); // 把连续的多个空格合并成一个空格
      console.log(newData);
      logDistMonitorDataList.value = newData.split(' ');
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      Notification.error({
        content: `出现异常！${error}`,
        closable: true,
        duration: 20000,
      });
    } finally {
      logDistMonitorDataLoading.value = false;
    }
  };
  /**
   * onMounted
   */
  onMounted(() => {
    getLogDistMonitorData();
  });
</script>

<style lang="less" scoped>
  .list-card-container {
    padding: 20px;
    // background-color: var(--color-bg-1);
    border-radius: var(--border-radius-default);
  }
</style>
